<template>
    <div class="home">
      <div class="mine-header">
			<div class="mine-welcome">	
				<div>Hello,你好</div>
				<a href="javascript:;">去登录</a>
			</div>
			<div class="mine-member">
				<a href="javascript:;"></a>
				<span>会员专属码</span>
			</div>
			<div class="mine-list">
				<ul class="mine-list_ul">
					<li>
						<span>0.00</span>
						<span>余额</span>
					</li>
					<li>
						<span>0</span>
						<span>积分</span>
					</li>
					<li>
						<span>0</span>
						<span>卡包</span>
					</li>
					<li>
						<span>0</span>
						<span>优惠券</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="mine-main">
			<ul class="mine-main_ul">
				<li @click="show">
					<a href="javascript:;" class="fairy_img"></a>
					<span>待支付</span>
				</li>
				<li>
					<a href="javascript:;" class="fairy_img"></a>
					<span>未完成</span>
				</li>
				<li>
					<a href="javascript:;" class="fairy_img"></a>
					<span>已完成</span>
				</li>
				<li>
					<a href="javascript:;" class="fairy_img"></a>
					<span>全部订单</span>
				</li>
			</ul>
		</div>
		<div class="mine-step">
			<ul class="mine-step_ul">
				<li>
					<a href="javascript:;" class="fairy_img"></a>
					<span>会员中心</span>
					<p>会员有好礼</p>
				</li>
				<li>
					<a href="javascript:;" class="fairy_img"></a>
					<span>收货地址</span>
				</li>
				<li>
					<a href="javascript:;" class="fairy_img"></a>
					<span>帮助中心</span>
				</li>
				<li>
					<a href="javascript:;" class="fairy_img"></a>
					<span>客服电话</span>
				</li>
				<li>
					<a href="javascript:;" class="fairy_img"></a>
					<span>体验APP</span>
				</li>
				<li>
					<a href="javascript:;" class="fairy_img"></a>
					<span>发票中心</span>
				</li>
				<li>
					<a href="javascript:;" class="fairy_img"></a>
					<span>绑卡</span>
				</li>
				<li>
					<a></a>
					<span>邀请</span>
				</li>

			</ul>
		</div>
		<MineDetails v-show="isShow.flag==false" :Show="isShow">
			
		</MineDetails >
    </div>
</template>
<script>
import MineDetails from "../../components/mine_details/mine_details";
export default{
    data(){
        return {
            baoms:[],
            isShow:{
            	flag:true
            }
        }
    },
	components: {
		MineDetails
	},
	methods:{
		 show:function(){
		 	this.isShow.flag = !this.isShow.flag
		 }
	}
}
</script>
<style scoped>
.home{
	height: 6.17rem;
	background-color: #f6f6f6;
    padding-bottom: .50rem;
	padding: 0;
	margin: 0;
	list-style: none;
	font-family: 微软雅黑;
	font-size: .14rem;
	text-decoration: none;
}
.mine-header{
	width: 100%;
	height: 1.5rem;
	background-image: url(https://static.dmall.com/kayak-project/usercenter/dist/usercenter/common/image/mine-top-img.png);
	background-repeat: no-repeat;
	background-size: 100%;
	position: relative;
}
.mine-welcome{
	width: 50%;
	height: .48rem;
	float: left;
	margin-top: 5%;
	margin-left: 3%;
}
.mine-welcome div{
	color: #fff;
}
.mine-welcome a{
	display: inline-block;
	width: .82rem;
	height: .24rem;
	background-color: white;
	color: #ff5700;
	border-radius: .24rem;
	text-align: center;
	line-height: .24rem;
	margin-top: 1.5%;
}
.mine-member {
	width: 1rem;
	height: .58rem;
	float: right;
	margin-top:5%;
	text-align: center;
}
.mine-member a{
	display: inline-block;
	width: .4rem;
	height: .4rem;
	background-image:url(https://static.dmall.com/kayak-project/kayak-lib/dist/kayak-lib/globalstyle/sprt.png?t=201702072136);
	background-repeat:no-repeat;
    background-size: 4rem auto;
    background-position: -2.5rem -5rem;
}
.mine-member span{
	display: block;
	width: 100%;
	text-align: center;
	font-weight: normal;
	color: #fff;
	position: relative;
	top: -14%;
}
.mine-list{
	width: 100%;
	height: .35rem;
	position: absolute;
	background-color:rgba(0,0,0,.1);
	bottom: 0;
	padding: .1rem 0;
}
.mine-list_ul{
	display: flex;
}
.mine-list_ul li{
	flex: 1;
	width: 100%;
	text-align: center;
}
.mine-list_ul li span:first-child{
	font-size: .16rem;
}
.mine-list_ul li span{
	display: block;
	color: #fff;
	font-size: .12rem;
}
.mine-main{
	padding: 3% 0;
	width: 100%;
	height: .8rem;

}
.mine-main_ul{
	display: flex;
	height: 100%;
	background-color: white;
}
.mine-main_ul li{
	flex: 1;
	width: 100%;
	padding: 4% 0;
	text-align: center;
	position: relative;
}
.mine-main_ul li a{
	display: inline-block;
	width: .3rem;
	height: .3rem;
}
.mine-main_ul li span{
	display: block;
	width: 100%;
	font-size: .13rem;
	position: absolute;
	right: 0;
	bottom: 16%;
	color: #36393f;
}
.fairy_img{
	background-image: url(https://static.dmall.com/kayak-project/kayak-lib/dist/kayak-lib/globalstyle/sprt.png?t=201702072136);
	background-repeat:no-repeat;
    background-size: 4rem auto;
    width: .3rem;
    height: .3rem;
    display: inline-block;
}
.mine-main_ul li:nth-of-type(1) a{
	display: inline-block;
    background-position: 0 -5.50rem;
}
.mine-main_ul li:nth-of-type(2) a{
	display: inline-block;
    background-position: -.50rem -5.50rem;
}
.mine-main_ul li:nth-of-type(3) a{
	display: inline-block;
    background-position: -1.00rem -5.50rem;
}
.mine-main_ul li:nth-of-type(4) a{
	display: inline-block;
    background-position: -1.50rem -5.50rem;
}
.mine-step{
	width: 100%;
	height: 1.64rem;
	background-color: #fff;
}
.mine-step_ul{
	width: 100%;
	height: 100%;
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	padding-top: 3%;
}
.mine-step_ul li {
	width: .9375rem;
	height: .67rem;
	text-align: center;
	margin-bottom: 3%;
}
.mine-step_ul li a{
	display: inline-block;
	width: .3rem;
	height: .3rem;
}
.mine-step_ul li span{
	display: block;
	width: 100%;
	font-size: .13rem;
	text-align: center;
	color: #666;
	position: relative;
	top: -2%;
}
.mine-step_ul li p{
	font-size: .12rem;
	color: #b8b8b8;
	text-align: center;
}
.mine-step_ul li:nth-of-type(1) a{
	display: inline-block;
    background-position: 0 -5.10rem;
}
.mine-step_ul li:nth-of-type(2) a{
	display: inline-block;
    background-position: -.50rem -5.10rem;
}
.mine-step_ul li:nth-of-type(3) a{
	display: inline-block;
    background-position: -1.00rem -5.10rem;
}
.mine-step_ul li:nth-of-type(4) a{
	display: inline-block;
    background-position: -1.50rem -5.10rem;
}
.mine-step_ul li:nth-of-type(5) a{
	display: inline-block;
    background-position: -2.00rem -5.10rem;
}
.mine-step_ul li:nth-of-type(6) a{
	display: inline-block;
    background-position: -2.50rem -5.50rem;
}
.mine-step_ul li:nth-of-type(7) a{
	display: inline-block;
    background-position: -2.00rem -5.50rem;
}
.mine-step_ul li:nth-of-type(8) a{
	display: inline-block;
    background:url(https://static.dmall.com/kayak-project/usercenter/dist/usercenter/common/image/icon-invite-friends.png) no-repeat;
    background-size: .30rem auto;
}

</style>
